<template>
  <div class="seach">
    <user-input v-bind="conFig" v-model="modelValue">
      <template #header><h1>高级检索</h1></template>
      <template #footer>
        <div class="btn-foot">
          <el-button icon="el-icon-refresh" @click="handleResetClick"
            >重置</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="headelQueryClick"
            >搜索</el-button
          >
        </div>
      </template>
    </user-input>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import userInput from '../../userInput/children/userInput.vue'
export default defineComponent({
  props: {
    conFig: {
      type: Object,
      required: true
    }
  },
  components: {
    userInput
  },
  emits: ['resetBtnClick', 'queryClick'],
  setup(Props, { emit }) {
    const formItems = Props.conFig?.formItem ?? []
    const formOriginData: any = {}
    for (let item of formItems) {
      formOriginData[item.field] = ''
    }
    const modelValue = ref(formOriginData)

    const handleResetClick = () => {
      modelValue.value = formOriginData
      emit('resetBtnClick')
    }
    const headelQueryClick = () => {
      console.log(modelValue.value)
      emit('queryClick', modelValue.value)
    }
    return {
      modelValue,
      handleResetClick,
      headelQueryClick
    }
  }
})
</script>

<style scoped>
.seach {
  background-color: rgb(255, 255, 255);
}
.btn-foot {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>
